<template #right>
	<van-nav-bar @click-left="onClickLeft" fixed="true" left-arrow>
		
	  <template #right>
		  
		<van-row>
		  <van-col span="3">
			  <van-icon name="ellipsis" size="22" @click="a()" />
			  </van-col>
		  
		  <van-col span="3"><van-icon name="cross" size="22" @click="b()" /></van-col>
		</van-row>
	    <div id="nav">
	    	  <van-tabbar border="true" fixed="true" v-model="active" route>
	    		  
	    	    <van-tabbar-item replace to="/MedicalCare_Home"  icon="home-o">首页</van-tabbar-item>
	    	   
	    	    <van-tabbar-item icon="manager-o" to="/MedicalCare_My">我的</van-tabbar-item>
	    	  </van-tabbar>
	      <router-view/>
	    </div>
		
	  </template>
	</van-nav-bar>
	<div style="margin-top: 2rem;">
		
		<van-row>
			<van-col span="11"><div class="hometop">
			<van-card
					 thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
			    	  	:price="400"
			    	  	:title="200"
			    	>
			    	  <template #tags>
			    	    <van-tag plain type="success">上门检测</van-tag><br />
			    	    <van-tag plain type="success">111</van-tag>
			    	  </template>
			    	  <template #footer>
			    	    <span>1111></span>
			    	  </template>
			    	</van-card>
					</div>
					</van-col>
			<van-col span="1"></van-col>
			<van-col span="11"><div class="hometop">
			<van-card
					thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
			    	  	:price="400"
			    	  	:title="200"
			    	>
			    	  <template #tags>
			    	    <van-tag plain type="success">上门检测</van-tag><br />
			    	    <van-tag plain type="success">111</van-tag>
			    	  </template>
			    	  <template #footer>
			    	    <span>1111></span>
			    	  </template>
			    	</van-card>
			</div></van-col>
		</van-row>
		
	</div>
	<div>
		<div style="margin-top: 1.5rem;">
			<van-row>
		  <van-col span="6">
			 <div style="text-align: left;font-size: 1.2rem;font-weight: bolder;">上门检测
			 </div>
			  </van-col>
		  <van-col span="10"></van-col>
		  <van-col span="7">
			  <div style="text-align: right; font-size: 0.9rem;color:darkgray;" to="MedicalCare_Show">查看全部项目>></div></van-col>
		</van-row>
		</div>
		<div style="margin-top: 0.8rem;">
			<van-row>
				<van-col span="15">
					<div style="background-color: antiquewhite;text-align: left;padding: 0.4rem;">
						<span class="card-t">慢病检测</span><br />
						<span class="card-d">三高 、心脏病初筛上门采样检测</span><br />
							<van-tag color="#2edd33">GO</van-tag>
					</div>
				</van-col>
				<van-col span="1"></van-col>
				<van-col span="8"><div>
						<div style="background-color:#aaffff;text-align: left;left;padding: 0.4rem;">
							<span class="card-t">肿瘤早筛</span><br />
							<span class="card-d">女性两癌早筛</span><br />
							<van-tag color="#7232dd">GO</van-tag>
						</div>
				</div>
				</van-col>
			</van-row>
			<div style="margin-top: 0.5rem;">
				<van-row>
					<van-col span="15">
						<div style="background-color:#AAFF7F;text-align: left;left;padding: 0.4rem;">
							<span class="card-t">传染病检测</span><br />
							<span class="card-d">肝炎、病毒感染上门采样检测</span><br />
								<van-tag color="#3addca">GO</van-tag>
						</div>
					</van-col>
					<van-col span="1"></van-col>
					<van-col span="8"><div>
							<div style="background-color:aliceblue;antiquewhite;text-align: left;left;padding: 0.4rem;">
								<span class="card-t">上门体检</span><br />
								<span class="card-d">中老年体检</span><br />
								<van-tag color="#dd9c18">GO</van-tag>
							</div>
					</div>
					</van-col>
				</van-row>
			</div>
		</div>
	</div>
	<div style="margin-top: 2rem;">
		<div style="margin-top: 1rem;">
			<van-row>
		  <van-col span="6">
			 <div style="text-align: left;font-size: 1.2rem;font-weight: bolder;">&nbsp; 全部护理
			 </div>
			  </van-col>
		  <van-col span="12"></van-col>
		  <van-col span="6"><div style="text-align: right; font-size: 0.9rem;color:darkgray;">全部>></div></van-col>
		</van-row>
		</div>
		<div style="margin-top: 1rem;">
			<van-grid :gutter="10" border="true" :column-num="3">
			  <van-grid-item>
				  <span class="tp">打针/采血</span>
				  <br/><span class="dt">黄体酮等注射</span>
			  </van-grid-item>
			  <van-grid-item>
			  			  <span class="tp">置管护理</span>
			  			  <br/><span class="dt">胃管尿管护理</span>
			  </van-grid-item>
			  <van-grid-item>
			  			  <span class="tp">上门换药</span>
			  			  <br/><span class="dt">卧床人群护理</span>
			  </van-grid-item>
			  <van-grid-item>
			  			  <span class="tp">小儿护理</span>
			  			  <br/><span class="dt">小儿打针</span>
			  </van-grid-item>
			  <van-grid-item>
			  			  <span class="tp">日常护理</span>
			  			  <br/><span class="dt">血糖检测</span>
			  </van-grid-item>
			  <van-grid-item>
			  			  <span class="tp">陪诊/陪护</span>
			  			  <br/><span class="dt">脑猝中护理</span>
			  </van-grid-item>
			</van-grid>
		</div>
	</div>
	<van-tabs title-class="vtab" color="green" v-model:active="active" sticky @click="showlist(active)">
	  <van-tab title="推荐"></van-tab>
	  <van-tab title="上门核酸"></van-tab>
	  <van-tab title="慢病检测"></van-tab>
	  <van-tab title="打针/采血"></van-tab>
	  <van-tab title="上门体检"></van-tab>
	  <van-tab title="肿瘤早筛"></van-tab>
	  <van-tab title="上门换药"></van-tab>
	  <van-list
	    v-model:loading="loading"
	    :finished="finished"
	    finished-text="没有更多了"
	    @load="onLoad()"
	  >
	  <van-call v-for="(item, index) in list" :key="index"/>
	    <!-- <van-cell v-for="item in list" :key="item" /> -->
		<div>
		<van-skeleton v-for="i in 18" title :row="3" :loading="list.length<=0" style="background-color: white;"/>
		<div style="margin-top: 0.5rem;" v-for="(item,index) in list" >
									
						<van-card
						thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
				  	:price="item.price"
				  	:title="item.title"
				>
				  <template #tags>
				    <van-tag plain type="success">{{item.type == 1 ? '上门检测':'上门护理'}}</van-tag><br />
				    <van-tag plain type="success">{{item.remarks}}</van-tag>
				  </template>
				  <template #footer>
				    <span>{{item.name}}></span>
				  </template>
				</van-card>
			</div>
		</div>	
	  </van-list>
	</van-tabs>
	<!-- 排序 -->
			<div class="list-sort">
				<div @click="onSort" :class="{'active':isActive==0}">综合排序</div>
				
				<div @click="saleSort" :class="{'active':isActive==1}">销量最高</div>
				
				<div @click="priceSort" style="display: flex;">
					<div>价格</div>
					<div style="margin-left: 3px;">
						<div :class="{'active':isActive==2}" class="iconfont icon-jiantou"></div>
						<div :class="{'active':isActive==3}" class="iconfont icon-jiantouxia"></div>
					</div>
				</div>
				
				<div><!-- 下拉菜单 -->
					<van-dropdown-menu>
					  <van-dropdown-item v-model="value1" :options="option1" @change="screen" />
					</van-dropdown-menu>
				</div>
				
			</div>
	
	
	
				
	<div v-if="list.length<=0" style="margin-top: 2rem;">
	<span>数据为空</span><br />
		<span>数据为空</span><br />
		<span>数据为空</span><br />
		<span>数据为空</span><br />
	</div>
	  
</template>

<script>
	import { ref } from 'vue';
	
	export default {
	  setup() {
	    const onClickLeft = () => history.back();
	    // const onClickRight = () => Toast('按钮'); 
	    return {
	        onClickLeft,
	    };
	  },
	  data(){
	  	return{
			
			loading:false,
			finished:false,
			active:0,
	  		list:[],
	  				}
	  			},
	  mounted() {
	  			
	  			var then=this;
	  			this.axios.get("care/showlist").then((res) => {
	  			  console.log(res.data)
	  			  this.list = res.data;		
	  			})
	  			
	  		},
	  methods:{
		  onload(obj){
			  var list = obj;
			  console.log(list);
			  setTimeout(() => {
			          
			         
			          
			        }, 1000);
		  },
		  showlist(active){
			var index = parseInt(active);
			this.index = index;
			this.list=[];
			if(index==0){
				this.axios.get("care/showlist").then((res) => {
				  console.log(res.data)
				  this.list = res.data;		
				})
			}else{
				this.axios.get("care/showlist").then((res) => {
			  		res.data.map(item=>{
			  		  	if(item.s_id===this.index){
			 				this.list.push(item);
			  		     }
			  		  });
			 		});
			}
			 this.onload(this.list);
		  },
		  a(){
			  this.$toast.success('分享');
			  
		  },
		  b(){
			  this.$toast.success('关闭');
		  }
	  }
	};
</script>

<style>
	.vtab{
		font-size: 5rem;
	}
   
	.van-card__desc{
		font-size: 0.9rem;
		color:darkgray
	}
	.tp{
		font-weight: bold;
	}
	.dt{
		font-size: 0.9rem;
		color:darkgray
	}
	.hometop1{
		float: right;
		width: 90%;
		background-color: #42B983;
		margin-top: 0.5rem;
		border: #FFFFFF;
	}
	.card-t{
		text-align: left;
		font-weight: bold;
	}
	.card-d{
		text-align: left;
		font-size: 0.9rem;
		color:darkgray
	}
	.target{
		text-align: right;
	}
	
	.list-sort{
			position: fixed;
			top: 54px;
			left: 0;
			z-index: 99;
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: -1px;
			font-weight: 300;
		}
	.list-title{
			 display: -webkit-box;
			 -webkit-box-orient: vertical;
			 -webkit-line-clamp: 2;
			 overflow: hidden;
		}
		.list-nav{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
		}
		.iconfont{
			font-size: 8px;
			margin: 0 3px;
		}
		.active{
			color: red;
		}
	
</style>
